<template>
  <!-- 弹框 -->
  <el-dialog title="详细信息" v-model="dialogVisible" width="50%" :before-close="handleClose">
    <!-- 描述列表 -->
    <el-descriptions class="margin-top h-[600px] overflow-y-auto" title="" :column="1" border label-width="150">
      <el-descriptions-item v-for="item in descriptionsList" :key="item.label" :label="item.label">
        <template v-if="item?.imageUrl">
          <el-image style="width: 100px; height: 100px" :src="item.imageUrl" :preview-teleported="true"
            :preview-src-list="srcList" />
        </template>
        <template v-else>
          {{ item.value }}
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import { HOUSE_PROPERTY_ENUM, HANDLE_OBJECT_ENUM, HOUSE_AUTHENTICATION_STATUS_ENUM } from "./utils/enum";
import { dayjs } from "element-plus";
const reallyUrl = import.meta.env.VITE_API_IMAGE;

const emit = defineEmits(["update:visible"]);
const statusList = ref(HOUSE_AUTHENTICATION_STATUS_ENUM);
const srcList = ref([]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  row: {
    type: Object,
    default: () => { },
  },
  type: {
    type: String,
    default: "company",
  },
});
const dialogVisible = ref(props.visible);

// 关闭弹框的逻辑
const handleClose = () => {
  dialogVisible.value = false;
  emit("update:visible", false);
};
const descriptionsList = ref([]);
const handleCompanyDetail = () => {
  let list = HOUSE_PROPERTY_ENUM;
  srcList.value = [];
  descriptionsList.value = list.map((item) => {
    let one = {
      label: item.label,
      value: props?.row?.[item.fieldName],
    };
    if (item.image && !!props?.row?.[item.fieldName]) {
      if (!!props?.row?.[item.fieldName]) {
        one.imageUrl = (props?.row?.[item.fieldName])?.[0]?.url ?? "";
        srcList.value.push(one.imageUrl);
      }
    }
    // 装修贷特殊处理
    if (item.fieldName == "decorationLoan") {
      one.value = one.value == 0 ? "否" : "是";
    }
    if (item.fieldName == "decorationPlanTime") {
      one.value = dayjs(one.value).format("YYYY-MM-DD");
    }
    if (item.fieldName == "livePlanTime") {
      one.value = dayjs(one.value).format("YYYY-MM-DD");
    }

    if (item.fieldName == 'status') {
      one.value = statusList.value[one.value].label
    }
    // 对象特殊处理
    if (HANDLE_OBJECT_ENUM.includes(item.fieldName)) {
      if (one.value) {
        let obj = JSON.parse(one.value);
        one.value = Object.keys(obj)
          .map((key) => `${obj[key]}${key}`)
          .join(",");
      }
    }
    return one;
  });
};
watchEffect(() => {
  dialogVisible.value = props.visible;
  if (props.row && dialogVisible.value) {
    handleCompanyDetail();
  }
});
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}
</style>
